{% load full_time %}
{% load problem_index %}
{% load get_attr %}
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>发气球机 - {{ contest.title }} - {{ web_config.title }}</title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/static/app/master.css?1.0.4"/>
    <script type="text/javascript" src="/static/library/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js?1.0.4"></script>
    <script type="text/javascript" src="/static/library/html2canvas.min.js"></script>
    <script type="text/javascript" src="/static/library/wejudge.contest.board.js"></script>
    <script type="text/javascript" src="/static/library/wejudge.grestp.js"></script>
    <script type="text/javascript" src="/static/library/wejudge.modalbox.js"></script>
    <script type="text/javascript" src="/static/library/jquery.scrollTo.min.js"></script>
    <style type="text/css">
    table{
        background: #34495e;
        color: #fff;
        font-size:16px;
    }
    table thead td,th {
        text-align: center;
        background: #2c3e50;
        border: 1px solid #000 !important;
    }
    td {
        vertical-align: middle !important;
        text-align: center ;
        border: 1px solid #000 !important;
        height: 60px;
    }
    .board_highlight td  {
        background: #3498db  !important;
    }
    td.proc{
        background: #f1c40f !important;
    }
    td.proc.animated{
        animation: proc_animation;
        animation-duration: 100ms;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }
    @keyframes proc_animation {
        from{
            background: #f1c40f;
        }
        to{
            background: #2c3e50;
        }
    }
    td.ac {
        background: #2ecc71  !important;
    }
    td.noac{
        background: #e74c3c !important;
    }
    td.first_blood{
        background: #008800 !important;
    }
    #procbar{
        background: #f00;
        height: 4px;
        position: fixed;
        top:0;
    }
    #TeamIdCard{
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        width: 640px;
        height: 300px;
        margin-left: -300px;
        margin-top: -150px;
        border: 1px solid #2c3e50;
        background: #fff;
        clear: both;
    }
    #TeamIdCardImgLayout{
        width: 280px;
        height:2980px;
        float:left;
        text-align: center;
        line-height:298px;
    }
    #TeamIdCardContent{
        padding: 25px;
        width: 300px;
        height:249px;
        float:left;
    }
    </style>
</head>
<body>
    <div class="header_container">
        <h1>{{ contest.title }} <small>{{ contest.start_time | full_time }} - {{ contest.end_time | full_time }}</small></h1>
    </div>
    <table id="board" class="table table-bordered">
        <thead>
        <tr>
            <th>评测ID</th>
            <th>队伍名称</th>
            <th>真实姓名</th>
            <th>题目</th>
            <th>发气球状态</th>
        </tr>
        </thead>
        <tbody>
            {% for status in judgestatus %}
            <tr>
                <td>{{ status.id }}</td>
                <td>{{ status.author.nickname }}({{ status.author.id }})</td>
                <td>{{ status.author.realname }}</td>
                <td>{{ cpindex_list | get_attr:status.problem.id | problem_index }}</td>
                <td><button class="btn send_balloon" data-id="{{ status.id }}">未发气球</button></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    <script type="text/javascript">
        $(function () {
            var storage = window.localStorage;
            $.each($(".send_balloon"), function (index, value) {
                var sid = $(value).attr("data-id");
                if(storage.getItem("send_balloon_" + sid)){
                    $(value).addClass("btn-success").text("已发气球");
                }else{
                    $(value).addClass("btn-danger").text("未发气球");
                }
            });
            $(".send_balloon").click(function () {
                var sid = $(this).attr("data-id");
                if(storage.getItem("send_balloon_" + sid)){
                    storage.removeItem("send_balloon_" + sid);
                    $(this).removeClass("btn-success").addClass("btn-danger").text("未发气球");
                }else{
                    storage.setItem("send_balloon_" + sid, true);
                    $(this).removeClass("btn-danger").addClass("btn-success").text("已发气球");
                }
            });
        });
        setTimeout(function () {
            window.location.reload();
        }, 30000);
    </script>
</body>
</html>
